<template>
  <view class="footer" :style="{
    background: backgroundColor, paddingBottom: safeArea
  }">
    <slot></slot>
  </view>
</template>

<script>
  export default {
    props: {
      backgroundColor: {
        type: String,
        default: '#fff'
      }
    },
    data() {
      return {
        
      }
    },
    computed: {
      // 计算手机底部的安全区域
      safeArea() {
        const { safeAreaInsets } = uni.getWindowInfo()
        return safeAreaInsets.bottom != 0 ? `${safeAreaInsets.bottom}px` : '30rpx'
      },
    },
    methods: {
      
    }
  }
</script>

<style scoped lang="scss">
  .footer{
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 30rpx;
    z-index: 100;
  }
</style>